<template>
  <div ref="toptab" class="k-toptab">
    <div id="itemBox" class="k-item-box">
      <div class="placeview"></div><!-- 首部占位div -->
      <div :ref="index" class="k-item" v-for="(item,index) in list" :key="JSON.stringify(item)"
        :style="[{marginLeft:index==0?'0px':space+'px',color:current==index?selectedColor:color,fontSize:current==index?selectedFontSize+'px':fontSize+'px',transition:fontTransition?'all .1s':'none'}]"
        @click="itemClick(index,$event)">
        {{item.title}}
      </div>
      <div class="placeview"></div><!-- 尾部占位div -->
      <div ref="slider" v-if="showSlider" class="k-slider"
        :style="[{top:sliderTop+'px',width:sliderWidth+'px'},sliderStyle]"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'k-toptab',
    data() {
      return {
        //当前选择索引
        current: 0,
        //导航的宽度
        tabWidth: 0,
        //定时器ID
        ID: 'null',
        //指示器的left
        sliderLeft: 0,
        //指示器的top
        sliderTop: 0,
        //指示器的宽度
        sliderWidth: this.sliderType == 'line' ? 20 : 6
      }
    },
    computed: {
      //指示器计算样式
      sliderStyle() {
        const style = {}
        //设置背景色
        const color = {
          primary: "#007aff",
          success: "#4cd964",
          warning: "#f0ad4e",
          error: "#dd524d"
        };
        style.backgroundColor = color[this.sliderColor];
        if (!color[this.sliderColor]) style.backgroundColor = this.sliderColor;

        style.left = this.sliderLeft + 'px'
        if (this.sliderTransitionType != 'none') {
          style.transition = 'all ' + this.slideDuration + 'ms'
        }
        if (this.sliderType == 'spot') {
          style.height = '6px'
          style.borderRadius = '100px'
        }
        if (this.sliderType == 'line') {
          style.height = '2px'
          style.borderRadius = '100px'
        }
        return style
      }
    },
    methods: {
      //item被点击事件
      itemClick(index, e) {
        if (this.current == index) return
        if (this.ID != 'null') return
        this.current = index
        //右滚动过渡效果
        if (e.layerX > this.tabWidth * 0.6) {
          let width = e.layerX - this.tabWidth / 2
          this.ID = setInterval(() => {
            width -= 2
            document.getElementById("itemBox").scrollLeft = document.getElementById("itemBox").scrollLeft + 2
            if (width <= 0) {
              clearInterval(this.ID)
              this.ID = 'null'
            }
          }, 10)
        }
        //左滚动过渡效果
        if (e.layerX < this.tabWidth * 0.4) {
          let width = this.tabWidth / 2 - e.layerX
          this.ID = setInterval(() => {
            width -= 2
            document.getElementById("itemBox").scrollLeft = document.getElementById("itemBox").scrollLeft - 2
            if (width <= 0) {
              clearInterval(this.ID)
              this.ID = 'null'
            }
          }, 10)
        }
        //设置指示器的left
        if (this.showSlider) {
          //普通平移过渡动画
          if (this.sliderTransitionType == 'translate') {
            setTimeout(() => {
              let itemLeft = this.$refs[index][0].offsetLeft
              let itemWidth = this.$refs[index][0].clientWidth
              let sliderWidth = this.$refs.slider.clientWidth
              this.sliderLeft = itemLeft + (itemWidth - sliderWidth) / 2
            }, 100)
          }
          if (this.sliderTransitionType == 'flexible') {
            let width = this.sliderType == 'line' ? 20 : 6
            let itemWidth = this.$refs[index][0].clientWidth
            let itemLeft = this.$refs[index][0].offsetLeft
            let sliderWidth = this.$refs.slider.clientWidth
            let sliderLeft = this.$refs.slider.offsetLeft
            setTimeout(() => {
              //往右边延伸
              if (itemLeft > sliderLeft) {
                this.sliderWidth = itemLeft + (itemWidth - sliderWidth) / 2 + sliderWidth - sliderLeft
                setTimeout(() => {
                  this.sliderLeft = itemLeft + (itemWidth - width) / 2
                  this.sliderWidth = width
                }, 200)
              }
              //往左边延伸
              else {
                this.sliderWidth = sliderLeft - itemLeft - (itemWidth - width) / 2
                this.sliderLeft = itemLeft + (itemWidth - width) / 2
                setTimeout(() => {
                  this.sliderWidth = width
                }, 200)
              }
            }, 100)
          }
        }
      },
    },
    mounted() {
      this.current = this.index
      //获取导航宽度
      this.tabWidth = this.$refs.toptab.clientWidth
      //初始设置指示器位置
      if (this.showSlider) {
        //设置指示器left
        this.sliderLeft = this.$refs[this.current][0].offsetLeft + (this.$refs[this.current][0].clientWidth - this.$refs
          .slider.offsetWidth) / 2

        //设置指示器top
        this.sliderTop = this.$refs[this.current][0].offsetTop + this.$refs[this.current][0].clientHeight + this
          .slideSpace
      }
    },
    props: {
      //tab导航数据列表
      list: {
        type: Array,
        required: true
      },
      //初始选择的索引
      index: {
        type: Number,
        default: 0
      },
      //item的间距,单位px
      space: {
        type: Number,
        default: 30
      },
      //选择中的文字颜色
      selectedColor: {
        type: String,
        default: 'black'
      },
      //未选中的文字颜色
      color: {
        type: String,
        default: '#909497'
      },
      //选中文字的文字大小，单位px
      selectedFontSize: {
        type: Number,
        default: 18
      },
      //未选中的文字大小，单位px
      fontSize: {
        type: Number,
        default: 16
      },
      //文字过渡效果
      fontTransition: {
        type: Boolean,
        default: true
      },
      //是否显示指示器
      showSlider: {
        type: Boolean,
        default: true
      },
      //指示器颜色
      sliderColor: {
        type: String,
        default: 'primary'
      },
      //指示器的过渡动画类型(none无动画,translate平移,flexible伸缩)
      sliderTransitionType: {
        type: String,
        default: 'translate'
      },
      //指示器过渡时间,单位ms
      slideDuration: {
        type: Number,
        default: 200
      },
      //指示器类型(spot圆点,line线条)
      sliderType: {
        type: String,
        default: 'line'
      },
      //指示器与文字的距离,单位px
      slideSpace: {
        type: Number,
        default: 5
      }


    }
  }
</script>

<style src='./tabs.css' scoped></style>
